import Vue from 'vue'
import VueRouter from 'vue-router'
// 1.导入路由
import login from '@/views/user/login.vue'
import layout from '@/views/layout.vue'

/* 导入token */
import {
  getToken
} from '@/utils/token.js'
import {
  Toast
} from 'vant'

Vue.use(VueRouter)

// 2.配置路由规则
const routes = [{
    name: 'login',
    path: '/login',
    component: login
  },
  {

    name: 'serch',
    path: '/serch',
    component: () => import('@/views/find/serch.vue')
  },
  //面经查看更多
  {

    name: 'haves',
    path: '/haves',
    component: () => import('@/views/find/haves.vue')
  },
  //分享资料
  {

    name: 'labour',
    path: '/labour',
    component: () => import('@/views/find/labour.vue')
  },
  {
    // 面试题页
    name: 'interview',
    path: '/interview/:id/:cityName',
    component: () => import('@/views/exercise/interview.vue')
  },
  // 我的页面
  {

    name: 'compile',
    path: '/compile',
    component: () => import('../views/mine/compile/index.vue'),
  },
  {
    name: 'amend',
    path: '/amend',
    component: () => import('../views/mine/compile/amend.vue'),
  },
  {
    name: 'findson',
    path: '/findsonn',
    component: () => import('../views/find/findson.vue')
  },
  {
    name: 'layout',
    path: '/',
    component: layout,
    // 二级路由
    children: [{
        name: 'company',
        path: '/company',
        component: () => import('../views/company/company.vue')
      },
      {
        name: 'exercise',
        path: '/exercise',
        component: () => import('../views/exercise/exercise.vue'),
        meta: {
          isLogin: true
        }
      },
      {
        name: 'find',
        path: '/find',
        component: () => import('../views/find/find.vue')
      },
      {
        name: 'mine',
        path: '/mine',
        component: () => import('../views/mine/mine.vue'),
        meta: {
          isLogin: true
        }
      },
      {
        path: '/',
        redirect: '/mine'
      }
    ]
  },
  // {
  //   path: '/notfound',
  //   name: 'notfound',
  //   component: notfound
  // },
  {
    /*
   (1) * : 任意路径重定向到notfound
   (2)路由默认从上往下匹配的，如果可以匹配到则跳转页面。无法匹配则继续往下匹配直到所有路由匹配结束
    */
    path: '*',
    redirect: '/notfound'
  }
]

/* 修改VueRouter的原型来吞掉路由导航错误提示 */
// 1.先存储VueRouter原生的push方法
const originPush = VueRouter.prototype.push
// 2.手动覆盖原型链中的push
VueRouter.prototype.push = function (location, onComplete, onAbort) {
  // this: 路由对象
  // 2.1 如果用户传了两个可选参数，我们也调用的时候传进去
  if (onComplete || onAbort) {
    // 我们自己的push其实调用的还是之前原生的push
    return originPush.call(this, location, onComplete, onAbort)
  } else {
    // 2.2 调用之前原生的push
    return originPush.call(this, location).catch(err => {
      // 捕捉路由跳转异常， 只要把这个代码给注释。 此时路由跳转错误了就不会出现爆红。
      // throw err;//真正底层源码。  抛出异常到控制台
    })
  }
}

const router = new VueRouter({
  routes
})

/* 注册路由前置导航守卫 */
router.beforeEach((to, from, next) => {
  // console.log(router)

  // ...
  // to: 要跳转的路由 （要到那里去）
  // console.log(to)
  // from : 从哪个路由跳转（从哪里来）
  // console.log(from)
  /* next : ***必须要调用的，否则路由无法跳转***
  next() :没有传参。 通过检查 。 允许跳转to页面
  next('/path') :传参数. 没有通过检查 。跳转到指定页面
  */
  /* 并不是所有的页面都需要做登录判断，把需要登录判断的页面添加meta */
  // 1.判断这个页面是否需要做登录验证
  if (to.meta.isLogin) {
    // 1.1 需要做登录判断
    // 2.检测用户有没有token
    if (getToken()) {
      // 2.1 有登录,不拦截，允许正常跳转
      next()
    } else {
      // 2.2 没登录，进行拦截。 跳转登录页
      // (1)弹窗提示
      Toast.fail('请先登录')
      // (2)跳转登录页
      next('/login')
    }
  } else {
    // 1.2 不需要做登录判断，无条件跳转
    next()
  }
})

export default router
